<template>
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
        <div class="table_box">
            <div class="table_header">
                <div class="search">
                    <a-range-picker valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="margin-right: 20px;width: 220px;" :showTime="showTime"
                        :placeholder="['开始时间', '结束时间']" @change="(e,q)=>onChange(q,'date','onSearch')"/>

                    <a-select v-model="searchData.type" style="width: 130px;margin-right: 20px;" @change="onSearch">
                        <a-select-option value="">
                            全部类型
                        </a-select-option>
                        <a-select-option value="电池">
                            电池
                        </a-select-option>
                        <a-select-option value="箱体">
                            箱体
                        </a-select-option>
                    </a-select>
                    <a-select v-model="searchData.status" style="width: 130px;margin-right: 20px;" @change="onSearch">
                        <a-select-option value="">
                            全部状态
                        </a-select-option>
                        <a-select-option value="已完成">
                            已完成
                        </a-select-option>
                        <a-select-option value="处理中">
                            处理中
                        </a-select-option>
                    </a-select>
                    <!-- /运维对象/运维内容 -->
                    <a-input-search placeholder="运维人员" style="width: 250px" v-model="searchData.user_name"
                        @search="onSearch" />
                </div>
                <div class="btn">
                  <a-button type="primary" @click="goadd"> 新增运维 </a-button>
                </div>
            </div>
            <div class="table_content">
                <a-table :columns="columns" :rowKey="(record) => record.id" :data-source="data" :pagination="pagination"
                    :show-total="total => `Total ${total} items`" :loading="loading" @change="handleTableChange">
                    <div slot="status" slot-scope="text, record">
                        <!-- <a-switch  default-checked /> -->
                        <a-tag :color="record.status=='处理中'?'#108ee9':'#999'">
                            {{record.status}}
                        </a-tag>
                    </div>
                    <div slot="operation" slot-scope="text, record">
                        <a-button type="link" v-if="record.status=='处理中'" style="color: #ff5353" @click="setStatus(record)" ghost>
                            完成
                        </a-button>
                        <a-button type="link" style="color: #1890ff" @click="goupdata(record.id)" ghost>
                            查看
                        </a-button>
                    </div>
                </a-table>
            </div>
            <a-modal v-model="visible" title="运维信息" on-ok="handleOk" width="70%" >
                <a-modal v-model="visible2" title="添加预警记录" on-ok="handleOk" width="60%" :footer="null">
                    <!-- <template slot="footer">
                        <a-button key="back" @click="visible2=faslse">
                            取消
                        </a-button>
                        <a-button key="submit" type="primary" :loading="loading" @click="addList">
                            添加
                        </a-button>
                    </template> -->
                    <div class="">
                        <div class="search">
                            <a-range-picker
                              valueFormat="YYYY-MM-DD HH:mm:ss" 
                              format="YYYY-MM-DD HH:mm:ss"
                              :showTime="showTime"
                              style="margin-right: 20px;width: 220px;"
                              :placeholder="['开始时间', '结束时间']"
                              @change="(e,q)=>onChange(q,'date2','onSearch2')"
                            />
                            <a-select  v-model="searchData2.level" style="width: 130px;margin-right: 20px;" @change="onSearch2">
                              <a-select-option value="">
                                <!-- 全部运维状态 -->
                                全部
                              </a-select-option>
                              <a-select-option v-for="(res,i) in level" :value="i">
                                  {{res.n}}
                              </a-select-option>
                            </a-select>
                          <a-input-search
                            placeholder="定位诊断项"
                            style="width: 200px"
                            v-model="searchData2.item"
                            @search="onSearch2"
                          />
                        </div>
                        <div class="search" style="margin-top: 10px;">
                            <selectObj :level="3" @change="selectObjChange"></selectObj>
                        </div>
                        <a-table :columns="earlyWarning" :rowKey="(record) => record.id" :data-source="earlyAlarms" :pagination="pagination2" @change="handleTableChange2" 
                           :loading="loading">
                           <div slot="level" slot-scope="text, record">
                             <div :class="level[record.level].c">
                                 <span class="iconfont icon-dianchijingbao"></span>
                                 <span style="margin-left: 5px;">{{level[record.level].n}}</span>
                             </div>
                           </div>
                           <!--  :row-selection="rowSelection()" -->
                            <div slot="operation" slot-scope="text, record">
                                <a-button type="link" style="color: #1890ff" @click="addList(record)">
                                    添加
                                </a-button>
                            </div>
                        </a-table>
                    </div>
                </a-modal>
                    
                <template slot="footer">
                    <a-button key="back" @click="visible=false">
                        关闭
                    </a-button>
                    <a-button key="submit" type="primary" @click="save"  v-if="!form.id">
                        保存
                    </a-button>
                </template>
                <div class="form_box">
                    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol"
                        :wrapper-col="wrapperCol" layout="horizontal">
                        <div v-if="!form.id"  class="form">
                            <a-form-model-item ref="name" label="运维时间" class="item">
                                <a-date-picker v-model="form.time" placeholder="请选择运维时间" :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD" />
                            </a-form-model-item>
                            <a-form-model-item ref="name" label="运维人员"  prop="user_name" class="item">
                                <a-input v-model="form.user_name" placeholder="请输入用户名称"/>
                            </a-form-model-item>
                            <a-form-model-item ref="name" label="运维类别"class="item">
                                <a-select  v-model="form.type" placeholder="请选择运维类别" @change="handleChange">
                                  <a-select-option value="电池">
                                    电池
                                  </a-select-option>
                                  <a-select-option value="箱体">
                                    箱体
                                  </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </div>
                        <div style="display: flex;" v-if="!form.id">
                            <a-form-model-item label="运维对象" class="" style="width:33%;">
                                <selectObj :level="3" @change="selectObjChange2"></selectObj>
                            </a-form-model-item>
                            <a-form-model-item label="运维内容" class="item" style="width:66%;">
                                <a-input v-model="form.description " style="width: 100%;" type="textarea" :autoSize="{ minRows: 5, maxRows: 6 }" />
                            </a-form-model-item>
                        </div>
                        <div  class="form" v-else>
                            <a-form-model-item label="运维时间" class="item">
                                <span>{{form.created_at}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="运维人员" class="item">
                                <span>{{form.user_name}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="运维类别" class="item">
                                <span>{{form.type}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="所在位置" class="item">
                                <span>{{form.e_s_cluster.name}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="运维对象" class="item">
                                <span>{{form.e_s_cluster.name}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="运维内容" class="item">
                                <span>{{form.description}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="运维状态" class="item">
                                <a-tag :color="form.status=='处理中'?'#108ee9':'#999'">
                                    {{form.status}}
                                </a-tag>
                            </a-form-model-item>
                            
                        </div>
                    </a-form-model>
                    
                    <a-table :columns="columns2.filter(e=> (!form.id || e.title!=='操作'))" :rowKey="(record,key) => record.id" :data-source="selectList" :pagination="false"
                       :loading="loading">
                       <div slot="level" slot-scope="text, record">
                         <div :class="level[record.level].c">
                             <span class="iconfont icon-dianchijingbao"></span>
                             <span style="margin-left: 5px;">{{level[record.level].n}}</span>
                         </div>
                       </div>
                        <div slot="operation" slot-scope="text, record" v-if="!form.id">
                           <a-button type="link" style="color: red" @click="delList(record)" ghost> 删除 </a-button>
                        </div>
                    </a-table>
                    <div class="addrecord" v-if="!form.id">
                        <a-button icon="plus" type="" style="color: #B2BACB" @click="showSelectList({limit:10})"> 点击添加未处理的预警记录 </a-button>
                    </div>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import {
        gets,
        del,
        get,
        add,
        updata
    } from "@/services";
    import {
        getSearchCriteria
    } from "@/utils/util"
    import selectObj from "@/components/selectObj/selectObj"
    import moment from 'moment'
    export default {
        components: {
            selectObj
        },
        data() {
            return {
                showTime:{defaultValue:[moment('00:00:00','HH:mm:ss'),moment('23:59:59','HH:mm:ss')]},
                date:[],
                columns: [{
                        title: "运维时间",
                        dataIndex: "time",
                        key: "time",
                    },
                    {
                        title: "运维人员",
                        key: "user_name",
                        dataIndex: "user_name"
                    },
                    {
                        title: "运维类别",
                        key: "type",
                        dataIndex: "type",
                    },
                    {
                        title: "所在位置",
                        key: "name4",
                        dataIndex: "name4",
                    },
                    {
                        title: "运维对象",
                        key: "name5",
                        dataIndex: "name5",
                    },
                    {
                        title: "运维内容",
                        key: "description",
                        dataIndex: "description",
                    },
                    {
                        title: "关联预警",
                        key: "alarm_id",
                        dataIndex: "alarm_id",
                    },
                    {
                        title: "创建时间",
                        key: "created_at",
                        dataIndex: "created_at",
                    },
                    {
                        title: "运维状态",
                        dataIndex: "status",
                        scopedSlots: {
                            customRender: "status"
                        },
                    },
                    {
                        title: "操作",
                        dataIndex: "operation",
                        scopedSlots: {
                            customRender: "operation"
                        },
                    },
                ],
                visible: false,
                visible2: false,
                form: {},
                columns2:[
                    {
                        title: "生成预警时间",
                        dataIndex: "created_at",
                        key: "created_at",
                    },
                    {
                        title: "储能单元",
                        key: "e_s_cluster.e_s_unit.name",
                        dataIndex: "e_s_cluster.e_s_unit.name"
                    },
                    {
                        title: "定位",
                        key: "e_s_cluster.name",
                        dataIndex: "e_s_cluster.name",
                    },
                    {
                        title: "诊断项",
                        key: "item",
                        dataIndex: "item",
                    },
                    {
                        title: "等级",
                        dataIndex: "level",
                        scopedSlots: {
                            customRender: "level"
                        },
                    },
                    {
                        title: "运维建议",
                        key: "suggestion",
                        dataIndex: "suggestion",
                    },
                    {
                        title: "处理预计效果",
                        key: "effect",
                        dataIndex: "effect",
                    },
                    {
                        title: "操作",
                        dataIndex: "operation",
                        scopedSlots: {
                            customRender: "operation"
                        },
                    },
                ],
                earlyWarning:[
                    {
                        title: "生成预警时间",
                        dataIndex: "created_at",
                        key: "created_at",
                    },
                    {
                        title: "储能单元",
                        key: "e_s_cluster.e_s_unit.name",
                        dataIndex: "e_s_cluster.e_s_unit.name"
                    },
                    {
                        title: "定位",
                        key: "e_s_cluster.name",
                        dataIndex: "e_s_cluster.name",
                    },
                    {
                        title: "诊断项",
                        key: "item",
                        dataIndex: "item",
                    },
                    {
                        title: "等级",
                        dataIndex: "level",
                        scopedSlots: {
                            customRender: "level"
                        },
                    },
                    {
                        title: "添加",
                        dataIndex: "operation",
                        scopedSlots: {
                            customRender: "operation"
                        },
                    },
                ],
                labelCol: {
                    span: 7
                },
                wrapperCol: {
                    span: 11
                },
                rules: {
                    name: [{
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur",
                    }, ],
                    role_id: [{

                        required: true,
                        message: "请选择角色",
                        trigger: "change",
                    }, ],
                    enterprise_id: [{

                        required: true,
                        message: "请选择企业",
                        trigger: "change",
                    }, ],
                    mobile: [{
                        required: true,
                        message: "请输入账号电话",
                        trigger: "blur",
                    }, ],
                    password: [{
                        required: true,
                        message: "请输入账号密码",
                        trigger: "blur",
                    }, ]
                },
                pagination: {
                    pageSize: 10,
                },
                pagination2: {
                    pageSize: 10,
                },
                searchData: {
                    user_name: '',
                    type:'',
                    status:''
                },
                searchData2: {
                    level: '',
                    item:''
                },
                loading: false,
                data: [],
                date2:[],
                earlyAlarms:[],
                selectList:[],
                selectTempList:[],
                esUnits:[],
                esClusters:[],
                level:{
                    // normal:{
                    //     c:'level1',
                    //     n:'正常'
                    // },
                    light:{
                        c:'level2',
                        n:'轻度'
                    },
                    moderate:{
                        c:'level3',
                        n:'中度'
                    },
                    severe:{
                        c:'level4',
                        n:'重度'
                    },
                },
                e_s_cluster_id:''
            };
        },
        computed: {
            ...mapState("setting", ["pageMinHeight"]),
        },
        created() {
            this.fetch({
                limit: 10
            })
        },
        methods: {
            onChange(e,n,f){
              this[n] = e
              this[f]()
            },
            setSelectList(e){
                this.selectList = [e]
            },
            selectObjChange(e){
                let id = e[2]
                if(id){
                    this.e_s_cluster_id = id
                    this.showSelectList({limit:10})
                }  
            },
            selectObjChange2(e){
                let id = e[2]
                if(id){
                    this.form.e_s_cluster_id = id
                }  
            },
            setStatus(data){
                updata({id:data.id,status:'已完成'},'operations').then(res=>{
                    if(res.data.code==20000){
                        this.$message.success('操作成功')
                        data.status = '已完成'
                    }
                })
            },
            save(){
                let form = {...this.form}
                form.alarm_id  = (this.selectList[0] || {}).id ||''
                form.alarm_type = 'App\\Models\\EarlyAlarm'
                if(!form.alarm_id){
                    this.$message.error('请添加预警记录')
                    return
                }
                add(form,'operations').then(({ data }) => {
                    
                    
                  if (data.code == 20000) {
                    this.fetch({
                        limit: 10
                    });
                    this.visible = false
                  }else{
                      console.log(data);
                      this.$message.error(data.message)
                  }
                });
            },
            handleSearch(value,path) {
                let dataa = {name:value}
                if(path=='esClusters'){
                    dataa.e_s_unit_id = this.form.e_s_unit_id
                }
                gets((getSearchCriteria(dataa)),path).then(({ data }) => {
                  if (data.code == 20000) {
                    let res = data.data
                    this[path] = res.data.map(e=>{
                        return {
                            value:e.id,
                            text:e.name
                        }
                    })
                }
                });
            },
            addList(e){
                // let {} = this
                this.selectList = [e]
                  // this.selectTempList.map(e=>{
                  //     if(selectList.findIndex(q=>q.id==e.id)==-1){
                  //         selectList.push(e)
                  //     }
                  // })
                  this.visible2=false
            },
            delList(e){
                this.selectList.splice(this.selectList.findIndex(q=>q.id==e.id),1)
            },
            rowSelection(){
              return {
                  onChange: (selectedRowKeys, selectedRows) => {
                      this.selectTempList = selectedRows
                  },
                  onSelect: (record, selected, selectedRows) => {
                    console.log(record, selected, selectedRows,this.columns);
                  },
                  onSelectAll: (selected, selectedRows, changeRows) => {
                    console.log(selected, selectedRows, changeRows);
                  },
                  // selectedRowKeys:[1,2,3],
              }
            },
            showSelectList(params={}){
                this.selectTempList = []
                let date = {}
                if(this.date2.length>1){
                    date.date_begin = this.date2[0]
                    date.date_end = this.date2[1]
                }
                let searchData = {...this.searchData2,e_s_cluster_id:this.e_s_cluster_id}
                gets({
                  ...params,
                  ...(getSearchCriteria(searchData)),
                  searchJoin:'and',
                  ...date,
                // search:'',searchFilelds:'alarm_id'
                },'earlyAlarms').then(({ data }) => {
                  if (data.code == 20000) {
                  let res = data.data
                  this.earlyAlarms = res.data;
                  this.visible2= true
                  this.pagination2 = {
                      ...this.pagination2,
                      total: res.total,
                  };
                }
                });
            },
            handleTableChange2(pagination, filters) {
                console.log(pagination, filters);
                const pager = {
                    ...this.pagination2
                };
                pager.current = pagination.current;
                this.pagination2 = pager;
                this.showSelectList({
                    page: pagination.current,
                    limit: pagination.pageSize,
                    ...filters,
                });
            },
            handleTableChange(pagination, filters) {
                console.log(pagination, filters);
                const pager = {
                    ...this.pagination
                };
                pager.current = pagination.current;
                this.pagination = pager;
                this.fetch({
                    page: pagination.current,
                    limit: pagination.pageSize,
                    ...filters,
                });
            },
            fetch(params = {}) {
                this.loading = true;
                let date = {}
                if(this.date.length>1){
                    date.date_begin = this.date[0]
                    date.date_end = this.date[1]
                }
                gets({
                  ...params,
                  ...date,
                  ...(getSearchCriteria(this.searchData)),
                  searchJoin:'and'
                },'operations').then(({ data }) => {
                  if (data.code == 20000) {
                    let res = data.data
                    this.data = res.data;
                    this.pagination = {
                        ...this.pagination,
                        total: res.total,
                    };
                }
                  this.loading = false;
                });
            },
            delData(id) {
                let _this = this
                this.$confirm({
                    title: "是否确定删除这条数据?",
                    content: "数据删除后将无法恢复",
                    okText: "确定",
                    okType: "danger",
                    cancelText: "取消",
                    onOk() {
                        del(id, '').then(({
                            data
                        }) => {
                            if (data.code == 20000) {
                                _this.$message.success("删除成功");
                                console.log(_this.pagination);
                                let i = 0;
                                if (_this.data.length == 1) {
                                    i = 1;
                                }
                                _this.fetch({
                                    limit: 10,
                                    page: _this.pagination.current - i
                                });
                            }
                        });
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                });
            },
            goupdata(id) {
                get(id,'operations').then(({ data }) => {
                  if (data.code == 20000) {
                        this.form = data.data
                        this.visible = true
                        this.selectList =data.data.alarm?[data.data.alarm]:[]
                        this.selectTempList = []
                    }
                });
                // this.$router.push(`/account/member/updata?id=${id}`);
            },
            goadd() {
                this.visible = true
                this.selectList = []
                this.selectTempList = []
                this.form = {}
            },
            onSearch() {
                this.fetch({
                    limit: 10
                })
            },
            onSearch2() {
                this.showSelectList({
                    limit: 10
                })
            },
        },
    };
</script>

<style scoped lang="less">
    .form_box{
        .form{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 33%;
            }
        }
        .addrecord{
            padding: 20px 0;
        }
    }
    .new-page {
        height: 100%;
        background-color: @base-bg-color;
        text-align: center;
        border-radius: 4px;

        .table_box {
            padding: 16px 23px;

            .table_header {
                display: flex;
                justify-content: space-between;
                padding-bottom: 24px;
            }
        }
    }
    
    .level1{
        color:#16E6FF ;
    }
    .level2{
        color: #FFE300;
    }
    .level3{
        color: #FF6600;
    }
    .level4{
        color: #FF2F4F;
    }
</style>
